<template>
  <div>
    <Header />
    <div class="w">
      <Breadcrumb :breadcrumbs="breadcrumbs" />
      <div v-if="!obAccessKey" class="top-box clearfix">
        <div class="button-box fl">
          <button v-for="(v,k) in currencyList" :key="k" class="btn" :class="{active: type === v}" @click="changeType(v)">{{v.toUpperCase()}}</button>
        </div>
        <!-- <div class="search-box fr" v-if="type !== 'btc'">
          <input @keyup.enter="search" v-model="searchStr" type="text" :placeholder="$t('subaccount.input_wallet_address')">
          <button class="btn" @click="search">
            <i class="iconfont icon-sousuo"></i> {{$t('statistics.dug_detail')}}</button>
        </div> -->
      </div>
      <component class="statistics" :is="type" />
    </div>
    <Footer />
  </div>
</template>
<script>
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import Breadcrumb from '@/components/Breadcrumb';
import { mapGetters } from 'vuex';
import btc from './components/btc';
import bch from './components/bch';
import bsv from './components/bsv';
import eth from './components/eth';
import dcr from './components/dcr';
import zec from './components/zec';
import etp from './components/etp';

export default {
  name: 'Statistics',
  components: {
    Header,
    Footer,
    Breadcrumb,
    btc,
    bch,
    bsv,
    eth,
    dcr,
    zec,
    etp,
  },
  data() {
    return {
      // searchStr: '',
      currencyList: ['btc', 'bch', 'bsv', 'eth', 'dcr', 'zec', 'etp'],
      type: 'btc',
      breadcrumbs: [
        {
          path: '/',
          titleKey: 'router.home',
        },
        {
          path: '/statistics',
          titleKey: 'router.statistics',
        },
      ],
    };
  },
  computed: {
    ...mapGetters(['obAccessKey']),
  },
  created() {
    this.type = this.obAccessKey ? 'btc' : this.$route.query.type || 'btc';
    this.breadcrumbs[1].path = this.$route.fullPath;
  },
  beforeRouteUpdate(to, from, next) {
    this.type = this.obAccessKey ? 'btc' : to.query.type || 'btc';
    this.breadcrumbs[1].path = to.fullPath;
    next();
  },
  methods: {
    // search() {
    //   this.$router.push(`/${this.type}search?id=${this.searchStr}`);
    // },
    changeType(v) {
      this.$router.push(`/statistics?type=${v}`);
    },
  },
};
</script>
<style lang="scss" scoped>
.top-box {
  height: 30px;
  margin-bottom: 20px;
  .button-box {
    width: 420px;
    display: flex;
    height: 100%;
    .btn {
      display: block;
      height: 100%;
      flex: 1;
      background-color: #fff;
      color: #333;
      border: solid 1px #eaeaea;
      border-left: none;
      outline: none;
      &:first-of-type {
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        border-left: solid 1px #eaeaea;
      }
      &:last-of-type {
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
      }
      &.active {
        background-color: #247ba0;
        color: #fff;
      }
    }
  }
  // .search-box {
  //   width: 440px;
  //   display: flex;
  //   height: 100%;
  //   input {
  //     flex: 1;
  //     border-bottom-left-radius: 3px;
  //     border-top-left-radius: 3px;
  //     outline: none;
  //     border: solid 1px #eaeaea;
  //     width: 100%;
  //     height: 100%;
  //     padding-left: 10px;
  //     font-size: 12px;
  //     line-height: 28px;
  //     &::-webkit-input-placeholder {
  //       color: #cccccc;
  //     }
  //     &:-moz-placeholder {
  //       color: #cccccc;
  //     }
  //     &::-moz-placeholder {
  //       color: #cccccc;
  //     }
  //     &:-ms-input-placeholder {
  //       color: #cccccc;
  //     }
  //     &:hover {
  //       border-color: #c0c4cc;
  //     }
  //     &:focus {
  //       border-color: #409eff;
  //     }
  //   }
  //   .btn {
  //     border-bottom-right-radius: 3px;
  //     border-top-right-radius: 3px;
  //     width: 115px;
  //     border: solid 1px #eaeaea;
  //     border-left: none;
  //     background-color: #247ba0;
  //     color: #fff;
  //     font-size: 12px;
  //     height: 100%;
  //     outline: none;
  //   }
  // }
}
.statistics /deep/ {
  .panel-top {
    background-color: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
    border: solid 1px #e0e0e0;
    overflow: hidden;
    border-radius: 3px;
    &.panel-top_2 {
      margin-top: 30px;
      .item-content {
        height: 465px;
      }
    }
    .item-title {
      height: 50px;
      padding: 13px 20px;
      background-color: #f9f9f9;
      box-shadow: inset 0px -1px 0px 0px #f2f2f2;
      font-size: 12px;
      line-height: 24px;
      .name {
        color: #333333;
      }
      .link {
        color: #247ba0;
      }
    }
    .item-content {
      display: flex;
      .echarts {
        flex: 1;
      }
      .item {
        flex: 1;
        height: 120px;
        text-align: center;
        position: relative;
        padding: 25px 0 0;
        line-height: 1.5;
        .item-top {
          color: #333333;
          font-size: 24px;
          .unit {
            font-size: 14px;
          }
        }
        .item-bottom {
          .name {
            color: #cccccc;
            font-size: 16px;
          }
        }
      }
    }
  }
  section {
    margin-top: 30px;
    background-color: #ffffff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    border: solid 1px #e0e0e0;
    position: relative;
    overflow: hidden;
    .header {
      height: 50px;
      line-height: 50px;
      background-color: #f9f9f9;
      box-shadow: inset 0px -1px 0px 0px #f2f2f2;
      padding: 0 20px;
    }
    .content {
      padding: 50px 0;
      font-size: 14px;
      color: #333333;
      > .r {
        padding-left: 60px;
        > .c {
          display: inline-block;
          line-height: 30px;
          vertical-align: top;
          &.border > span {
            display: inline-block;
            padding: 0 18px;
            color: #247ba0;
            height: 40px;
            line-height: 40px;
            border-radius: 3px;
            border: solid 1px #247ba0;
            margin-right: 120px;
            margin-top: 10px;
            i {
              margin-right: 10px;
            }
          }
        }
      }
      > .row {
        line-height: 60px;
        display: flex;
        justify-content: center;
        &:nth-of-type(2) {
          margin-top: 40px;
        }
        > .col {
          padding-left: 34px;
          width: 270px;
          border-right: 1px solid #e6e6e6;
          white-space: nowrap;
          &:nth-of-type(4) {
            border-right: none;
          }
          &.noborder {
            border-right: none;
          }
          .border > span {
            display: inline-block;
            padding: 0 18px;
            color: #247ba0;
            height: 40px;
            line-height: 40px;
            border-radius: 3px;
            border: solid 1px #247ba0;
            white-space: nowrap;
            i {
              margin-right: 10px;
            }
          }
          .title {
            line-height: 40px;
            color: #247ba0;
            white-space: nowrap;
          }
        }
      }
    }
    table {
      width: 100%;
      tr {
        border-top: 1px solid #eaeaea;
        &:nth-of-type(even) {
          background-color: #fbfbfb;
        }
        th {
          height: 30px;
          color: #ccc;
          font-weight: normal;
          i {
            margin-left: 6px;
            font-weight: bold;
          }
        }
        td {
          height: 60px;
          color: #333;
          .todetai{
            color: #247ba0;
          }
          .label{
            &.label-success{
              color: #70c1b3;
            }
            &.label-danger{
              color: #eb547c;
            }
          }
        }
        th,
        td {
          font-size: 12px;
          white-space: nowrap;
          text-align: center;
          border: none;
          &:first-of-type {
            [type="checkbox"] {
              display: none;
              & + label {
                width: 16px;
                height: 16px;
                background-color: #ffffff;
                border-radius: 3px;
                border: solid 1px #eaeaea;
                display: inline-block;
                vertical-align: middle;
              }
              &:checked + label {
                border: none;
                &::after {
                  content: "\E67D";
                  font-size: 16px;
                  color: #70c1b3;
                  line-height: 16px;
                }
              }
            }
          }
          > .text-truncate {
            width: 300px;
            margin: 0 auto;
            display: inline-block;
            color: #333;
          }
        }
      }
    }
  }
}
</style>
